<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }

            ul {
                list-style: none;
            }

            a {
                text-decoration: none;
                color: black;
            }

            img {
                vertical-align: top;
            }

            .box {
                width: 751px;
                margin: 50px auto;
                background: red;
                overflow: hidden;
                position: relative;
            }

            .fl {
                float: left;
            }

            .fr {
                float: right;
            }

            .left {
                width: 600px;
                background: yellow;
                margin-right: 30px;
            }

            .right {
                width: 120px;
                background: orange;
            }

            .left>.head {
                height: 30px;
                background: #eaf9fe;
                font-size: 15px;
            }

            .head>* {
                height: 100%;
                /*background: purple;*/
                line-height: 30px;
            }

            .a {
                font-size: 0;
            }

            .a>a {
                font-size: 12px;
                color: #666664;
                margin-right: 12px;
            }

            .video>h3 {
                font-size: 15px;
            }

            .video>div {
                font-size: 0;
            }

            .video>div>* {
                font-size: 12px;
                vertical-align: top;
            }

            .video>div>.img {
                width: 15px;
                height: 14px;
                background: url("./p.png");
                margin-right: 5px;
            }

            .img+span {
                margin-right: 15px;
            }

            .video>div>span {
                height: 14px;
                line-height: 14px;
                display: inline-block;
            }

            li {
                font-size: 16px;
                line-height: 16px;
            }


            .ad {
                width: 278px;
                height: 191px;
                background: cyan;
                position: absolute;
                right: 30px;
                bottom: 30px;
                border: 2px solid gray;
                box-shadow: -20px -20px 5px 0 black;
            }

        


        </style>
    </head>
    <body>

        <div class="box">
            <!-- 左半部分 -->
            <div class="left fl">
                <div class="head">
                    <h3 class="fl">今日头条</h3>
                    <div class="fr a">
                        <a href="">热点</a>
                        <a href="">深度</a>
                        <a href="">青春季</a>
                    </div>
                </div>

                <div class="content">
                    <div class="video">
                        <img src="./video.png" alt="">
                        <h3>实拍二炮跨区联合演习 千里机动发射导弹</h3>
                        <div>
                            <span class="pd img"></span>
                            <span>安徽卫视</span>
                            <span class="count img"></span>
                            <span>2,974,128</span>
                            <span class="comment img"></span>
                            <span>1,804</span>
                        </div>
                        <ul>
                            <li>[热点]中国将提交东海划界案 大陆架延伸到冲绳海潮</li>
                            <li>[热点]中国将提交东海划界案 大陆架延伸到冲绳海潮</li>
                            <li>[热点]中国将提交东海划界案 大陆架延伸到冲绳海潮</li>
                            <li>[热点]中国将提交东海划界案 大陆架延伸到冲绳海潮</li>

                        </ul>

                    </div>
                    <div class="flow"></div>
                </div>
            </div>

            <!-- 右半部分 -->
            <div class="right fr"></div>

            <div class="ad">
                
            </div>

        </div>
        
    </body>
</html>